@mixin flex-justify($justify) {
  display: flex;
  justify-content: $justify;
}

@mixin flex-align($align) {
  display: flex;
  align-items: $align;
}

@mixin flex($align, $justify) {
  display: flex;
  align-items: $align;
  justify-content: $justify;
}

$flex-justify: (
  baseline: baseline,
  between: space-between,
  center: center,
  left: flex-start,
  right: flex-end,
  around: space-around,
  stretch: stretch,
);
$flex-align: (
  baseline: baseline,
  top: flex-start,
  bottom: flex-end,
  stretch: stretch,
  center: center,
);

@each $key, $value in $flex-justify {
  .justify-#{$key} {
    justify-content: #{$value};
  }
}

@each $key, $value in $flex-align {
  .align-#{$key} {
    align-items: #{$value};
  }
}

/* 左上 */
.flex-q {
  @include flex(flex-start, flex-start);
}

/* 左上中 */
.flex-w {
  @include flex(flex-start, center);
}

.flex-e {
  @include flex(flex-start, flex-end);
}

/* 中间靠左 */
.flex-a {
  @include flex(center, flex-start);
}

/* 水平垂直居中 */
.flex-s {
  @include flex(center, center);
}

/* 垂直居中，水平靠右 */
.flex-d {
  @include flex(center, flex-end);
}

/* 垂直靠下，水平靠左 */
.flex-z {
  @include flex(flex-end, flex-start);
}

/* 垂直靠下，水平居中 */
.flex-x {
  @include flex(flex-end, center);
}

/* 垂直靠下，水平靠右 */
.flex-c {
  @include flex(flex-end, flex-end);
}

.flex-grow-0 {
  flex-grow: 0;
}

.flex-grow-1 {
  flex-grow: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-shrink-1 {
  flex-shrink: 1;
}

.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

@for $var from 1 to 12 {
  .flex-#{$var} {
    flex: $var;
  }
}

@for $var from 1 to 21 {
  .g-#{$var * 2} {
    column-gap: #{2 * $var}px;
    row-gap: #{2 * $var}px;
  }
  .gc-#{$var * 2} {
    column-gap: #{2 * $var}px;
  }

  .gr-#{$var * 2} {
    row-gap: #{2 * $var}px;
  }
}
